<template>
  <view>
    <!-- <view
      class="bg-white activate"
      style="border-bottom: 0.1upx solid #e7e7e7;border-top: 0.5upx solid #e7e7e7;;"
    >
      <view style="display: flex;align-items: center;">
        <text style="margin-right: 5upx;color: #feb2b2;" class="cuIcon-title line-red"></text>
        <text style="font-weight: bold;font-size: 110%;">活动介绍</text>
      </view>
    </view>
    <view>
      <view class="title">
        <text
          class="text-cut align-center flex justify-center"
          style="font-size: 150%;font-weight: bold;"
        >{{activity.title}}</text>
      </view>
      <view class="padding-xs text-black flex justify-center" style="justify-content: center;">
        <text
          class="flex"
          style="font-size: 100%;font-weight: bold;justify-content: center;"
        >{{activity.desc}}</text>
      </view>
    </view>

    <view
      class="bg-white activate"
      style="border-bottom: 0.1upx solid #e7e7e7;border-top: 0.5upx solid #e7e7e7;;"
    >
      <view style="display: flex;align-items: center;">
        <text style="margin-right: 5upx;color: #feb2b2;" class="cuIcon-title line-red"></text>
        <text style="font-weight: bold;font-size: 110%;">活动规则</text>
      </view>
    </view>
    <view class="padding-xs text-black flex justify-center" style="justify-content: center;">
      <text
        class="flex"
        style="font-size: 100%;font-weight: bold;justify-content: center;"
      >{{activity.rules}}</text>
    </view>-->

    <view class="act_wrap cu-item shadow">
      <view class="cu-bar justify-center bg-white">
        <view class="action border-title">
          <text class="text-xl text-bold">活动介绍</text>
          <text class="bg-pink" style="width:2rem"></text>
        </view>
      </view>

      <!--标题-->
      <view class="act_name">
        <text>{{activity.name}}</text>
      </view>
      <!-- 详细 -->
      <view class="act_detail">
        <view class="act_user">
          <view class="cu-tag light">{{activity.user.nickname}}</view>
        </view>
        <view class="text-pink myUp">
          <view class="cu-tag bg-green light round">up主</view>
        </view>
        <view class="act_like">
          <view class="cu-tag bg-yellow light round">{{likeCount}}个点赞</view>
        </view>
        <view class="act_time">*{{activity.cnTime}}</view>
      </view>

      <view class="act_desc">{{activity.desc}}</view>

      <view class="landc_wrap">
        <view :class="[isLike ? 'img_like_active' : 'img_like']" @click="handLike">
          <text class="iconfont icon-dianzan">{{likeCount}}</text>
        </view>
        <view :class="[isFollow ? 'img_collection_active' : 'img_collection']" @click="handFollow">
          <view v-show="isFollow">
            <text class="iconfont icon-xihuan">已关注</text>
          </view>
          <view v-show="!isFollow">
            <text class="iconfont icon-xihuan">关注</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 介绍 -->
    <view class="act_wrap cu-item shadow">
      <view class="cu-bar justify-center bg-white">
        <view class="action border-title">
          <text class="text-xl text-bold">活动规则</text>
          <text class="bg-pink" style="width:2rem"></text>
        </view>
      </view>
      <text class="flex rules_wrap">{{activity.rules}}</text>
    </view>
  </view>
</template>

<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
import { uniIcons } from "@dcloudio/uni-ui";
import { uniFab } from "@dcloudio/uni-ui";
import fabBtn from "@/component/fabBtn";
import moment from "moment";
moment.locale("zh-cn");
export default {
  components: {
    uniSegmentedControl,
    uniIcons,
    uniFab,
    fabBtn
  },
  data() {
    return {
      isLike: false,
      likeCount: 0,
      isFollow: false,
      activity: []
    };
  },
  props: {
    myId: Number
  },
  watch: {
    myId() {
      console.log("watch id...");
      //this.getCourse();
    }
  },
  mounted() {
    this.id = this.myId;
    this.getAct();
  },
  methods: {
    getAct() {
      this.request({
        url:
          this.apiServer +
          "/activities/findActivitiesByIdAndUId?id=" +
          this.myId +
          "&uId=" +
          uni.getStorageSync("user").id
      }).then(res => {
        console.log(res);
        this.activity = res.data;
        this.isLike = res.data.islike;
        this.isFollow = res.data.isfollow;
        this.likeCount = res.data.like;
        this.activity.cnTime = moment(res.data.createTime).format("YYYY-MM-DD");
      });
    },
    handFollow() {
      this.isFollow = !this.isFollow;
      var status;
      if (this.isFollow == true) {
        //未关注=>关注了
        status = 1;
      } else {
        //关注=>未关注
        status = 2;
      }
      this.request({
        url: this.apiServer + "/follow/doActivitiesFollow",
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: {
          pId: this.activity.id,
          uId: uni.getStorageSync("user").id,
          status: status
        }
      }).then(res => {
        console.log(res);
      });
    },
    handLike() {
      if (this.isLike == false) {
        this.likeCount++;
      } else {
        this.likeCount--;
      }
      this.isLike = !this.isLike;
      //判断
      var status;
      if (this.isLike == true) {
        //未点赞=>点赞
        status = 1;
      } else {
        //点赞=>未点赞
        status = 2;
      }
      this.request({
        url: this.apiServer + "/like/doActivitiesike",
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded"
        },
        data: {
          pId: this.activity.id,
          uId: uni.getStorageSync("user").id,
          status: status
        }
      }).then(res => {
        console.log(res);
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.act_wrap {
  padding-top: 10rpx;
  border-bottom: #ccc 5rpx solid;

  .act_name {
    padding-left: 10rpx;
    font-size: 40rpx;
    color: #000;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
  }
  .act_detail {
    display: flex;
    margin-bottom: 10rpx;
    //padding-left: 5rpx;
    padding: 10rpx;
    .act_user {
      color: #000;
      font-size: 30rpx;
      padding: 10rpx;
      border-left: 7rpx solid $color-theme;
    }
    .act_like {
      padding: 10rpx;
      font-size: 28rpx;
      color: orange;
      text {
      }
    }
    .act_time {
      color: #ccc;
      font-size: 28rpx;
      padding: 10rpx;
    }
  }
  .act_desc {
    color: #ccc;
    display: flex;
    flex-wrap: wrap;
    // justify-content: center;
    align-items: center;
    padding: 10rpx;
  }
  .landc_wrap {
    display: flex;
    justify-content: space-between;
    //border-bottom: 1px solid #ccc;
    padding: 0 20rpx;
    padding-bottom: 10rpx;
    height: 60rpx;
    .img_like {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }
    .img_like_active {
      color: orange;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }
    .img_collection {
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }
    .img_collection_active {
      color: orange;
      display: flex;
      justify-content: center;
      align-items: center;
      flex: 1;
    }
  }
}

.rules_wrap {
  font-size: 100%;
  font-weight: bold;
  justify-content: center;
  padding: 10rpx 0;
}
.user-goldcoin {
  display: flex;
  align-items: center;
}

.user-id {
  display: flex;
  align-items: center;
}

.user-credit {
  font-size: 100%;
  font-weight: bold;
}

.user-name {
  font-size: 150%;
  font-weight: bold;
}

.content1 {
  padding: 30upx 30upx 30upx 30upx;
}

.user-logo {
  width: 160rpx;
  height: 160rpx;
  display: block;
  overflow: hidden;
  border-radius: 50%;
  margin: 40rpx auto;
}

.activate {
  display: flex;
  justify-content: space-between;
  height: 90upx;
  align-items: center;
  padding-left: 20upx;
  padding-right: 20upx;
}
</style>
